<script setup>
	import { computed, ref } from 'vue'
	import { EyeOutlined } from '@ant-design/icons-vue'
	import { useApiDatasetStore } from '@/views/plugin/dashboard/store/apiDataset'

	const store = useApiDatasetStore()
	const visible = ref(false)

	// 切换预览面板显示状态
	const togglePreview = () => {
		visible.value = !visible.value
	}

	// 获取选中的列名
	const selectedColumnNames = computed(() => {
		if (!store.formData.itemConfig.selectedColumns || store.formData.itemConfig.selectedColumns.length === 0) {
			return '未选择'
		}
		return store.formData.itemConfig.selectedColumns.join('、')
	})

	// 获取API参数描述
	const apiParamsDescription = computed(() => {
		const params = store.formData.itemConfig.apiParams
		if (!params || Object.keys(params).length === 0) {
			return '无参数'
		}
		return Object.entries(params)
			.map(([key, value]) => `${key}: ${value}`)
			.join(', ')
	})

	// 获取格式化配置描述
	const getFormatDescription = (format) => {
		const fieldName = format.field || '未知字段'
		return fieldName
	}

	// 获取格式化类型标签
	const getFormatTypeLabel = (type) => {
		const typeLabels = {
			date: '日期格式',
			number: '数字格式',
			string: '字符串格式',
			boolean: '布尔格式'
		}
		return typeLabels[type] || type
	}

	// 获取请求方法颜色
	const getMethodColor = (method) => {
		const colors = {
			GET: 'green',
			POST: 'blue',
			PUT: 'orange',
			DELETE: 'red',
			PATCH: 'purple'
		}
		return colors[method] || 'default'
	}
</script>

<template>
	<a-tooltip title="配置预览">
		<a-popover v-model:open="visible" overlay-class-name="config-preview-popover" placement="rightTop" trigger="click">
			<template #content>
				<div class="config-preview-panel">
					<div class="panel-header flex justify-between items-center mb-4">
						<span>API数据集配置预览</span>
					</div>
					<a-descriptions :column="1" :label-style="{ width: '110px', 'text-align': 'left' }" bordered size="small">
						<a-descriptions-item label="API接口">
							<div v-if="store.formData.itemConfig.apiPath" class="flex items-center space-x-2">
								<a-tag :color="getMethodColor(store.formData.itemConfig.apiMethod)" size="small">
									{{ store.formData.itemConfig.apiMethod }}
								</a-tag>
								<span class="font-mono text-sm">{{ store.formData.itemConfig.apiPath }}</span>
							</div>
							<span v-else class="text-gray-500">未选择</span>
						</a-descriptions-item>

						<a-descriptions-item label="API参数">
							<div class="max-w-xs">
								<span class="text-sm">{{ apiParamsDescription }}</span>
							</div>
						</a-descriptions-item>

						<a-descriptions-item label="显示字段">
							<template v-if="selectedColumnNames !== '未选择'">
								<div class="tag-container">
									<a-tag
										v-for="name in store.formData.itemConfig.selectedColumns"
										:key="name"
										class="field-tag"
										color="blue"
										>{{ name }}
									</a-tag>
								</div>
							</template>
							<template v-else>
								<span class="text-gray-500">未选择</span>
							</template>
						</a-descriptions-item>

						<a-descriptions-item label="驼峰转换">
							<a-tag :color="store.formData.itemConfig.enableCamelCase ? 'green' : 'default'">
								{{ store.formData.itemConfig.enableCamelCase ? '已启用' : '未启用' }}
							</a-tag>
						</a-descriptions-item>

						<a-descriptions-item label="格式化配置">
							<template
								v-if="store.formData.itemConfig.formatConfig && store.formData.itemConfig.formatConfig.length > 0"
							>
								<a-space direction="vertical" style="width: 100%">
									<div
										v-for="(format, index) in store.formData.itemConfig.formatConfig"
										:key="index"
										class="format-card"
									>
										<a-space
											>{{ getFormatDescription(format) }}
											<span class="format-arrow">→</span>
											<a-tag :bordered="false" color="success">{{ getFormatTypeLabel(format.type) }}</a-tag>
											<span class="format-arrow">→</span>
											{{ format.format }}
										</a-space>
									</div>
								</a-space>
							</template>
							<template v-else>无</template>
						</a-descriptions-item>

						<!-- API接口详细信息 -->
						<a-descriptions-item v-if="store.selectedApiInfo" label="接口信息">
							<div class="space-y-2">
								<div v-if="store.selectedApiInfo.summary" class="text-sm">
									<span class="font-medium">描述：</span>{{ store.selectedApiInfo.summary }}
								</div>
								<div v-if="store.selectedApiInfo.parameters && store.selectedApiInfo.parameters.length > 0">
									<div class="text-sm font-medium mb-1">参数定义：</div>
									<div class="space-y-1">
										<div
											v-for="param in store.selectedApiInfo.parameters"
											:key="param.name"
											class="text-xs text-gray-600 flex items-center space-x-2"
										>
											<span class="font-mono">{{ param.name }}</span>
											<span class="text-gray-400">{{ param.type }}</span>
											<span v-if="param.required" class="text-red-500">*</span>
											<span v-if="param.description">- {{ param.description }}</span>
										</div>
									</div>
								</div>
							</div>
						</a-descriptions-item>
					</a-descriptions>
				</div>
			</template>
			<a-button :class="{ 'text-primary bg-primary-1 shadow-sm': visible }" type="link" @click="togglePreview">
				<template #icon>
					<eye-outlined />
				</template>
			</a-button>
		</a-popover>
	</a-tooltip>
</template>

<style scoped>
	.config-preview-panel {
		width: 400px;
		max-height: 600px;
		overflow-y: auto;
	}

	.panel-header {
		font-weight: 600;
		color: #1890ff;
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 8px;
	}

	.tag-container {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		max-width: 280px;
	}

	.field-tag {
		margin: 0;
		font-size: 12px;
	}

	.format-card {
		background: #f8f9fa;
		padding: 8px;
		border-radius: 4px;
		border: 1px solid #e9ecef;
	}

	.format-arrow {
		color: #1890ff;
		font-weight: bold;
	}

	:deep(.ant-descriptions-item-label) {
		font-weight: 500;
		color: #595959;
	}

	:deep(.ant-descriptions-item-content) {
		color: #262626;
	}

	.max-w-xs {
		max-width: 280px;
		word-break: break-all;
	}
</style>

<style>
	.config-preview-popover .ant-popover-content {
		padding: 0;
	}

	.config-preview-popover .ant-popover-inner-content {
		padding: 16px;
	}
</style>
